<template>
  <a-card class="j-inner-table-wrapper" :bordered="false">
    <!-- 查询区域 begin -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="仓库">
              <j-search-select-tag
                v-model="queryParam.storeId"
                v-decorator="['storeId']"
                dict="biz_store,store_name,id"
              />
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="供应商">
              <j-search-select-tag
                v-model="queryParam.supplierId"
                v-decorator="['supplierId']"
                dict="biz_supplier,supplier_name,id"
              />
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="审批状态">
              <j-dict-select-tag v-model="queryParam.status" placeholder="请选择审批状态" dictCode="approval_status" />
            </a-form-item>
          </a-col>
          <a-col :xl="12" :lg="12" :md="12" :sm="24">
            <a-form-item label="申请时间">
              <j-date
                class="query-group-cust"
                v-model="queryParam.applicationTime_begin"
                placeholder="请选择开始时间"
                show-time
                date-format="YYYY-MM-DD HH:mm:ss"
              />
              <span class="query-group-split-cust"></span>
              <j-date
                class="query-group-cust"
                v-model="queryParam.applicationTime_end"
                placeholder="请选择结束时间"
                show-time
                date-format="YYYY-MM-DD HH:mm:ss"
              />
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="金额">
              <a-input class="query-group-cust" v-model="queryParam.totalPrice_begin" placeholder="最小值" trim />
              <span class="query-group-split-cust"></span>
              <a-input class="query-group-cust" v-model="queryParam.totalPrice_end" placeholder="最大值" trim />
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span class="table-page-search-submitButtons table-operator">
              <a-button type="primary" icon="search" @click="searchQuery">查询</a-button>
              <a-button type="primary" icon="reload" @click="searchReset">重置</a-button>
              <!-- <a @click="handleToggleSearch" style="margin-left: 8px">
                <span>{{ toggleSearchStatus ? '收起' : '展开' }}</span>
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
              </a> -->
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域 end -->

    <!-- 操作按钮区域 begin -->
    <div class="table-operator">
      <a-button type="primary" icon="plus" @click="handleAdd">新增</a-button>
      <a-button type="primary" icon="download" @click="handleExportXls('采购报表')">导出</a-button>
      <!-- <a-button type="primary" icon="download" @click="handleExportXls('入库审批单表')">导出</a-button>
      <a-upload
        name="file"
        :showUploadList="false"
        :multiple="false"
        :headers="tokenHeader"
        :action="importExcelUrl"
        @change="handleImportExcel"
      >
        <a-button type="primary" icon="import">导入</a-button>
      </a-upload> -->

      <a-dropdown v-if="selectedRowKeys.length > 0" v-has="'storeapp:approval'">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="handleBatchApp">
            <a-icon type="check" />
            <span>审核通过</span>
          </a-menu-item>
          <!-- <a-menu-item key="2" @click="batchDel">
            <a-icon type="delete" />
            <span>删除</span>
          </a-menu-item> -->
        </a-menu>
        <a-button>
          <span>批量操作</span>
          <a-icon type="down" />
        </a-button>
      </a-dropdown>
    </div>
    <!-- 操作按钮区域 end -->

    <!-- table区域 begin -->
    <div>
      <a-alert type="info" showIcon style="margin-bottom: 16px">
        <template slot="message">
          <span>已选择</span>
          <a style="font-weight: 600; padding: 0 4px">{{ selectedRowKeys.length }}</a>
          <span>项</span>
          <a style="margin-left: 24px" @click="onClearSelected">清空</a>
        </template>
      </a-alert>

      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        class="j-table-force-nowrap"
        :loading="loading"
        :columns="columns"
        :customRow="rowIsRed"
        :dataSource="dataSource"
        :pagination="ipagination"
        :expandedRowKeys="expandedRowKeys"
        :rowSelection="{ selectedRowKeys, onChange: onSelectChange }"
        @expand="handleExpand"
        @change="handleTableChange"
      >
        <!-- 内嵌table区域 begin -->
        <template slot="expandedRowRender" slot-scope="record">
          <a-tabs tabPosition="top">
            <a-tab-pane tab="入库审批明细" key="storeApprovalDetail" forceRender>
              <store-approval-detail-sub-table :record="record" />
            </a-tab-pane>
          </a-tabs>
        </template>
        <!-- 内嵌table区域 end -->

        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>

        <template slot="imgSlot" slot-scope="text">
          <div style="font-size: 12px; font-style: italic">
            <span v-if="!text">无图片</span>
            <img v-else :src="getImgView(text)" alt="" style="max-width: 80px; height: 25px" />
          </div>
        </template>

        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span>
          <a-button v-else ghost type="primary" icon="download" size="small" @click="downloadFile(text)">
            <span>下载</span>
          </a-button>
        </template>

        <template slot="action" slot-scope="text, record">
          <span v-show="isShowBtn(record)" v-has="'storeapp:edit'">
            <a @click="handleEdit(record)">编辑</a>
          </span>
          <span v-show="isShowBtn(record)" v-has="'storeapp:approval'">
            <a-divider type="vertical" />
            <a @click="handleApproval(record)">审批</a>
            <!-- <a-divider type="vertical" /> -->
          </span>
          <span v-show="record.status === 1 && record.checkoutStatus === 0" v-has="'storeapp:checkout'">
            <!-- <a-divider type="vertical" /> -->
            <a @click="handleCheckout(record)">结账</a>
            <a-divider type="vertical" />
          </span>
          <span v-show="!isShowBtn(record)">
            <a @click="handleDetail(record)">详情</a>
          </span>

          <!-- <a-dropdown>
            <a class="ant-dropdown-link">
              <span>更多 <a-icon type="down" /></span>
            </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a-popconfirm title="确定删除吗?" @confirm="handleDelete(record.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown> -->
        </template>
      </a-table>
    </div>
    <!-- table区域 end -->

    <!-- 表单区域 -->
    <store-approval-modal ref="modalForm" @ok="modalFormOk" />
  </a-card>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import StoreApprovalModal from './modules/StoreApprovalModal'
import StoreApprovalDetailSubTable from './subTables/StoreApprovalDetailSubTable'
import JDictSelectTag from '@/components/dict/JDictSelectTag.vue'
import JSearchSelectTag from '@/components/dict/JSearchSelectTag'
import JDate from '@/components/jeecg/JDate.vue'
// import JInput from '@/components/jeecg/JInput'
import { filterMultiDictText } from '@/components/dict/JDictSelectUtil'
import { postPurchaseApprovalBatch } from '@/api/storeApproval'

import '@/assets/less/TableExpand.less'

export default {
  name: 'StoreApprovalList',
  mixins: [JeecgListMixin],
  components: {
    StoreApprovalModal,
    StoreApprovalDetailSubTable,
    JDictSelectTag,
    JSearchSelectTag,
    JDate,
    // JInput,
  },
  data() {
    return {
      description: '入库审批单表列表管理页面',
      // 表头
      columns: [
        {
          title: '#',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: (t, r, index) => parseInt(index) + 1,
        },
        {
          title: '仓库',
          align: 'center',
          dataIndex: 'storeId_dictText',
        },
        {
          title: '供应商',
          align: 'center',
          dataIndex: 'supplierId_dictText',
        },
        {
          title: '采购员',
          align: 'center',
          dataIndex: 'applicant_dictText',
        },
        {
          title: '账期(天)',
          align: 'center',
          dataIndex: 'paymentDay',
        },
        {
          title: '最后结算日',
          align: 'center',
          dataIndex: 'finalAccountDay',
        },
        {
          title: '申请人',
          align: 'center',
          dataIndex: 'createBy',
        },
        {
          title: '审批人',
          align: 'center',
          dataIndex: 'approvalPerson',
        },
        {
          title: '审批状态',
          align: 'center',
          dataIndex: 'status_dictText',
        },
        {
          title: '申请时间',
          align: 'center',
          dataIndex: 'applicationTime',
        },
        {
          title: '审批时间',
          align: 'center',
          dataIndex: 'approvalTime',
        },
        {
          title: '总价',
          align: 'center',
          dataIndex: 'totalPrice',
        },
        {
          title: '是否结账',
          align: 'center',
          dataIndex: 'checkoutStatus_dictText',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          width: 147,
          scopedSlots: { customRender: 'action' },
        },
      ],
      // 字典选项
      dictOptions: {},
      // 展开的行test
      expandedRowKeys: [],
      url: {
        list: '/storage/storeApproval/list',
        delete: '/storage/storeApproval/delete',
        deleteBatch: '/storage/storeApproval/deleteBatch',
        exportXlsUrl: '/storage/storeApproval/exportXls',
        importExcelUrl: '/storage/storeApproval/importExcel',
      },
    }
  },
  computed: {
    importExcelUrl() {
      return window._CONFIG['domianURL'] + this.url.importExcelUrl
    },
    exportXlsUrl() {
      return window._CONFIG['domianURL'] + this.url.exportXlsUrl
    },
    isShowBtn() {
      return function (record) {
        return ['待审批', '拒绝'].includes(record['status_dictText'])
      }
    },
  },
  methods: {
    initDictConfig() {},
    rowIsRed(r, i) {
      return {
        style: {
          color: r.is_red === 1 ? 'red' : '#000000A6',
        },
      }
    },
    handleApproval: function (record) {
      this.$refs.modalForm.edit(record)
      this.$refs.modalForm.title = '审批'
      this.$refs.modalForm.disableSubmit = true
    },
    handleCheckout: function (record) {
      this.$refs.modalForm.edit(record)
      this.$refs.modalForm.title = '结账'
      this.$refs.modalForm.disableSubmit = true
    },
    handleExpand(expanded, record) {
      this.expandedRowKeys = []
      if (expanded === true) {
        this.expandedRowKeys.push(record.id)
      }
    },
    handleBatchApp() {
      for (let i = 0; i < this.selectionRows.length; i++) {
        const item = this.selectionRows[i]
        if (![0, 2].includes(item.status)) {
          console.log(item.status)
          return this.$message.warning('只有“待审核”、“拒绝”状态，才可以操作')
        }
      }
      postPurchaseApprovalBatch(this.selectionRows).then((res) => {
        let { message, success } = res
        if (success) {
          this.$message.success(message)
          this.loadData()
        } else {
          this.$message.warning(message)
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';
</style>